import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import HeaderComponent from '@/components/HeaderComponent/HeaderComponent';
import { getAnnounceDetail } from '@/api/module/information';

export default function NewsDetail() {
  const parms = useParams();
  const [informationDetail, setInformationDetail] = useState<
    Awaited<ReturnType<typeof getAnnounceDetail>>['data']
  >({
    id: 0,
    content: '',
    addtime: '',
    title: '',
  });
  const reqInformationDetail = async (id: string) => {
    console.log(id);
    const res = await getAnnounceDetail(id);
    setInformationDetail(res.data);
  };
  useEffect(() => {
    console.log(parms);
    parms.id && reqInformationDetail(parms.id);
  }, []);
  return (
    <div className="text-white-1 px-4">
      <HeaderComponent title="informationDetail" />
      <div
        className="content bg-bg-1 py-4 px-2 overflow-y-scroll"
        style={{
          maxHeight: 'calc(100vh - 76px)',
        }}
      >
        <div className="title text-center font-bold text-xl">
          {informationDetail.title}
        </div>
        <div className="date text-center opacity-50 text-sm my-2">
          {informationDetail.addtime}
        </div>
        <div
          dangerouslySetInnerHTML={{ __html: informationDetail.content }}
          className="content"
        ></div>
      </div>
    </div>
  );
}
